<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>会员注册 - 文档管理系统</title>
    <!-- 引入 Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入 Font Awesome 图标 -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 自定义 Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#1677ff', // 主色调，与登录页面保持一致
                        lightBg: '#f5f7fa', // 浅背景色
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                },
            }
        }
    </script>
    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .login-input {
                @apply w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary transition-all duration-200;
            }
            .login-button {
                @apply w-full py-3 rounded-lg bg-primary text-white font-medium hover:bg-primary/90 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:ring-offset-2;
            }
        }
    </style>
</head>

<body class="bg-lightBg min-h-screen flex items-center justify-center p-4">
    <div class="w-full max-w-md bg-white rounded-xl shadow-md overflow-hidden">
        <div class="p-8">
            <!-- 注册表单头部 -->
            <div class="text-center mb-8">
                <h1 class="text-3xl font-bold text-gray-800 mb-2">会员注册</h1>
            </div>

            <!-- 注册表单 -->
            <form id="registerForm" onsubmit="handleRegister(event)">
                <!-- 手机号输入框 -->
                <div class="mb-4">
                    <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">
                        <i class="fa fa-mobile-phone text-primary mr-1"></i>
                        手机号 <span class="text-red-500">*</span>
                    </label>
                    <input type="tel" id="phone" name="phone" class="login-input" placeholder="请输入手机号" required>
                </div>

                <!-- 邮箱输入框 -->
                <div class="mb-4">
                    <label for="email" class="block text-sm font-medium text-gray-700 mb-1">
                        <i class="fa fa-envelope text-primary mr-1"></i>
                        邮箱 <span class="text-red-500">*</span>
                    </label>
                    <input type="email" id="email" name="email" class="login-input" placeholder="邮箱用于找回密码" required>
                </div>

                <!-- 密码输入框 -->
                <div class="mb-4">
                    <label for="password" class="block text-sm font-medium text-gray-700 mb-1">
                        <i class="fa fa-lock text-primary mr-1"></i>
                        密码 <span class="text-red-500">*</span>
                    </label>
                    <div class="relative">
                        <input type="password" id="password" name="password" class="login-input pr-10"
                            placeholder="请输入密码" required>
                        <button type="button" id="togglePassword"
                            class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500">
                            <i class="fa fa-eye-slash"></i>
                        </button>
                    </div>
                </div>

                <!-- 确认密码输入框 -->
                <div class="mb-6">
                    <label for="confirmPassword" class="block text-sm font-medium text-gray-700 mb-1">
                        <i class="fa fa-lock text-primary mr-1"></i>
                        确认密码 <span class="text-red-500">*</span>
                    </label>
                    <input type="password" id="confirmPassword" name="confirmPassword" class="login-input"
                        placeholder="请确认密码" required>
                </div>

                <!-- 注册按钮 -->
                <button type="submit" id="registerBtn" class="login-button">
                    <i class="fa fa-user-plus mr-2"></i> 注册
                </button>

                <!-- 错误提示信息 -->
                <div id="errorMessage" class="mt-4 p-3 bg-red-50 text-red-500 rounded-md text-sm hidden">
                    <i class="fa fa-exclamation-circle mr-2"></i>
                    <span id="errorText">注册失败，请重试</span>
                </div>

                <!-- 成功提示信息 -->
                <div id="successMessage" class="mt-4 p-3 bg-green-50 text-green-500 rounded-md text-sm hidden">
                    <i class="fa fa-check-circle mr-2"></i>
                    <span id="successText">注册成功，正在跳转到登录页面...</span>
                </div>
            </form>
        </div>

        <!-- 底部登录提示 -->
        <div class="bg-gray-50 px-8 py-4 text-center text-sm text-gray-600">
            已有账号？ <a href="login.html" class="text-primary hover:text-primary/80 font-medium">立即登录</a>
        </div>
    </div>

    <script>
        // 切换密码可见性
        document.getElementById('togglePassword').addEventListener('click', function () {
            const passwordInput = document.getElementById('password');
            const icon = this.querySelector('i');

            if (passwordInput.type === 'password') {
                passwordInput.type = 'text';
                icon.classList.remove('fa-eye-slash');
                icon.classList.add('fa-eye');
            } else {
                passwordInput.type = 'password';
                icon.classList.remove('fa-eye');
                icon.classList.add('fa-eye-slash');
            }
        });

        // 表单验证
        function validateForm() {
            const phone = document.getElementById('phone').value;
            const email = document.getElementById('email').value;
            const password = document.getElementById('password').value;
            const confirmPassword = document.getElementById('confirmPassword').value;
            const errorMessage = document.getElementById('errorMessage');
            const errorText = document.getElementById('errorText');

            // 验证手机号
            const phoneRegex = /^1[3-9]\d{9}$/;
            if (!phoneRegex.test(phone)) {
                errorText.textContent = '请输入有效的手机号码';
                errorMessage.classList.remove('hidden');
                return false;
            }

            // 验证邮箱
            const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
            if (!emailRegex.test(email)) {
                errorText.textContent = '请输入有效的邮箱地址';
                errorMessage.classList.remove('hidden');
                return false;
            }

            // 验证密码长度
            if (password.length < 6) {
                errorText.textContent = '密码长度不能少于6位';
                errorMessage.classList.remove('hidden');
                return false;
            }

            // 验证两次密码是否一致
            if (password !== confirmPassword) {
                errorText.textContent = '两次输入的密码不一致';
                errorMessage.classList.remove('hidden');
                return false;
            }

            return true;
        }

        // 处理注册逻辑
        function handleRegister(event) {
            event.preventDefault();

            const registerBtn = document.getElementById('registerBtn');
            const errorMessage = document.getElementById('errorMessage');
            const successMessage = document.getElementById('successMessage');

            // 隐藏之前的提示信息
            errorMessage.classList.add('hidden');
            successMessage.classList.add('hidden');

            // 表单验证
            if (!validateForm()) {
                return;
            }

            // 显示加载状态
            registerBtn.disabled = true;
            registerBtn.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i> 注册中...';

            // 获取表单数据
            const phone = document.getElementById('phone').value;
            const email = document.getElementById('email').value;
            const password = document.getElementById('password').value;

            // 创建URL参数
            const params = new URLSearchParams();
            params.append('phone', phone);
            params.append('email', email);
            params.append('password', password);
            params.append('confirmPassword', document.getElementById('confirmPassword').value);

            // 发送注册请求
            fetch('/register', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                body: params
            })
                .then(response => response.json())
                .then(data => {
                    registerBtn.disabled = false;
                    registerBtn.innerHTML = '<i class="fa fa-user-plus mr-2"></i> 注册';

                    if (data.code === 0) {
                        // 注册成功，显示成功信息并跳转到登录页面
                        successMessage.classList.remove('hidden');
                        setTimeout(() => {
                            window.location.href = '/login.html';
                        }, 2000);
                    } else {
                        // 注册失败，显示错误信息
                        document.getElementById('errorText').textContent = data.message || '注册失败，请重试';
                        errorMessage.classList.remove('hidden');
                    }
                })
                .catch(error => {
                    registerBtn.disabled = false;
                    registerBtn.innerHTML = '<i class="fa fa-user-plus mr-2"></i> 注册';
                    document.getElementById('errorText').textContent = '网络错误，请稍后重试';
                    errorMessage.classList.remove('hidden');
                });
        }

        // 监听输入事件，清除错误提示
        const formInputs = document.querySelectorAll('input');
        formInputs.forEach(input => {
            input.addEventListener('input', function () {
                document.getElementById('errorMessage').classList.add('hidden');
            });
        });
    </script>
</body>

</html>